<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>17_案例练习-注册页面-密码框验证</title>
</head>

<body>
    <form action="">
        姓名:<input id="name" placeholder="请输入6到8个英文字母">
        <span id="nameInfo"></span>
        <br>

        密码:<input type="password">
    </form>


    <script>
        // 获取文本框中的内容
        // 定义正则表达式
        // 验证文本框中的内容是否符合正则

        var inp_name = document.querySelector('#name');

        inp_name.onblur = function () {
            // 获取文本框中的内容 使用的value属性
            // 文本框必须使用value  双标记标签使用innerHTML、innerText textContent
            var inp_name_value = inp_name.value;

            // 定义正则表达式
            var reg = /^[A-z]{6,8}$/;

            var name_info = document.querySelector('#nameInfo');

            if(reg.test(inp_name_value)){
                name_info.innerHTML = '您的名字可以使用√';
                name_info.style.color = 'green';
            }else{
                name_info.innerHTML = '您的名字不符合规范x';
                name_info.style.color = 'red';
            }
            

        }




    </script>
</body>

</html>